<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 适口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>携程旅游</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="main">
        <!-- 设置分类 -->
        <!-- <div class="cate"> -->
        <!-- 酒店 -->
        <div class="hotel pink">
            <!-- 左侧 -->
            <a href="javascript:;" class="hotel_left">
                <span>酒店</span>
                <span class="logo"></span>
            </a>
            <!-- 右侧 -->
            <div class="hotel_list">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
        </div>
        <!-- 机票 -->
        <div class="tirckey blue">
            <!-- 左侧 -->
            <a href="javascript:;" class="hotel_left">
                <span>酒店</span>
                <span>图标</span>
            </a>
            <!-- 右侧 -->
            <div class="hotel_list">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
        </div>
        <!-- 旅游 -->
        <div class="travel green">
            <!-- 左侧 -->
            <a href="javascript:;" class="hotel_left">
                <span>酒店</span>
                <span>图标</span>
            </a>
            <!-- 右侧 -->
            <div class="hotel_list">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
        </div>
        <!-- 其他类 -->
        <div class="others orange">
            <!-- 左侧 -->
            <a href="javascript:;" class="hotel_left">
                <span class="food_border">美食林</span>
                <span>美食林</span>
            </a>
            <!-- 右侧 -->
            <div class="hotel_list">
                <a href="javascript:;">美食林</a>
                <a href="javascript:;">美食林</a>
                <a href="javascript:;">美食林</a>
                <a href="javascript:;">美食林</a>
            </div>
        </div>
        <!-- </div> -->

        <!-- 设置导航分类 -->
        <div class="nav">
            <!-- (a[href="javascript:;"]>i+p{自由行})*12 -->
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
             <a href="javascript:;">
                 <i></i>
                 <p>自由行</p>
             </a>
        </div>
        <!-- 设置热卖 -->
        <div class="hot_sale">
            <div class="sale_title">
                <span>特卖汇</span>
                <a href="javascript:;">领红包再下单 &gt;</a>
            </div>
            <div class="sale_prod">
                <div class="sale_left">
                    <a href="javascript:;" class="hot_sell">
                        <span class="hot">爆款</span>
                        <img src="./images/hot_sell_1.jpg" alt="">
                        <div class="prod_text">呼和浩特+希拉穆仁草原+响沙湾4日跟团游·携程自营·【春季预售·特卖双飞】2晚五星锦江+主题蒙古包 东航直飞 特色美食 踏草迎春</div>
                        <div class="sale_price">
                            <span>&yen; 999起</span>
                            <span>省&yen;800</span>
                        </div>
                    </a>
                </div>
                <div class="sub_sell">
                    <a href="javascript:;">
                        <dl>
                            <dt>千款特价</dt>
                            <dd>走过路过不错过</dd>
                        </dl>
                        <img src="./images/pic-tmh-02.png" alt="">
                    </a>
                    <a href="javascript:;">
                        <dl>
                            <dt>境外精选</dt>
                            <dd>
                                <span>百元</span>出境游</dd>
                        </dl>
                        <img src="./images/pic-tmh-04.png" alt="">
                    </a>
                    <a href="javascript:;">
                        <dl>
                            <dt>周边玩乐</dt>
                            <dd>
                                <span>十元</span>度周末</dd>
                        </dl>
                        <img src="./images/pic-tmh-03.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <!-- 设置热门活动 -->
        <div class="hot_activite">
            <div class="hot_title">
                <span>热门活动</span>
                <a href="javascript:;">获取更多福利&gt;</a>
            </div>
            <div class="hot_content">
                <a href="javascript:;"><img src="./images/hot_activity (1).jpg" alt=""></a>
                <a href="javascript:;"><img src="./images/hot_activity (2).jpg" alt=""></a>
                <a href="javascript:;"><img src="./images/hot_activity (3).jpg" alt=""></a>
                <a href="javascript:;"><img src="./images/hot_activity (4).jpg" alt=""></a>
                <a href="javascript:;"><img src="./images/hot_activity (5).jpg" alt=""></a>
                <a href="javascript:;"><img src="./images/hot_activity (6).jpg" alt=""></a>
            </div>
        </div>

        <!-- 设置联系方式 -->
        <div class="phone">
            <a href="javascript:;">
                <span>☎</span>
                <span>电话预定</span>
            </a>
            <a href="javascript:;">
                <span>✉</span>
                <span>邮件预定</span>
            </a>
            <a href="javascript:;">
                <span>☎</span>
                <span>手机预定</span>
            </a>
        </div>

        <!-- 设置版权 -->
        <div class="copyright">
            <div>
                <a href="javascript:;">网站地图</a> |
                <a href="javascript:;">语音</a> |
                <a href="javascript:;">电脑版</a>
            </div>
            <div> 
                <a href="javascript:;">©2018携程旅行</a>｜<a href="javascript:;">沪ICP备08023580号</a>
            </div>    
        </div>
    </div>
</body>
</html>